/*
 * @Title: 活动-演艺活动
 * @Created by: ycq
 */
<template>
	<view class="showHd">
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="nav">
			<view class="nav-item" @click="toCity">
				<text >沈阳</text>
				<view class="sanjiao"></view>
			</view>
			<view class="nav-item" @click="showTime">
				<text >{{timeName}}</text>
				<view class="sanjiao"></view>
			</view>
			<view class="nav-item" @click="showPxBox">
				<text :class="navIndex==1?'nav-ac':''">{{pxData[pxIndex].px}}</text>
				<view class="sanjiao"></view>
			</view>
			<view class="nav-item" @click="showAllType">
				<text :class="navIndex==2?'nav-ac':''">{{typeName}}</text>
				<view class="sanjiao"></view>
			</view>
		</view>
		<view class="ShowTime" v-if="boxIndex==2">
			<view class="time-list">
				<view class="time-item" :class="timeIndex==index?'time-item-ac':''" v-for="(item,index) in timeData" :key="index"  @click="chooseTime(index)">
					<text>{{item}}</text>
					<image v-if="timeIndex==index" src="/static/type-xz.png" mode=""></image>
				</view>
			</view>
			<view class="week">
				<text class="week-item" :style="{color:(index==0||index==6?'rgba(112,190,255,1.00)':'')}" v-for="(item,index) in weekData" :key='index'>{{item}}</text>
			</view>
			<view class="line"></view>
			<DateView ref="dater" :config='dateConf'></DateView>
			<view class="date-commit" @click="dateCommit">确定</view>
		</view>
		<view class="ShowType" v-if="boxIndex==3">
			<view :class="pxIndex==index?'type-ac':''" v-for='(item,index) in pxData'  :key='index' @click="choosePx(index)">
				<text>{{item.px}}</text>
				<image v-if="pxIndex == index" src="/static/duihao.png" mode=""></image>
			</view>
		</view>
		<view class="ShowAll" v-if="boxIndex==4">
			<view class="type-item " @click="chooseAll" :class="typeIndex1 == null && typeIndex2 == null? 'type-item-ac':''">
				<text>全部分类</text>
				<image v-if="typeIndex1 == null && typeIndex2 == null" src="/static/type-xz.png" mode=""></image>
			</view>
			<view class="type-list" v-for="(item,index) in typeData" :key='index'>
				<view class="type-title">{{item.title}}</view>
				<view class="type-item" 
				@click="chooseType(index,innerIndex)" 
				v-for="(typeItem,innerIndex) in item.tdata" 
				:class="typeIndex1 == index && typeIndex2 == innerIndex?'type-item-ac':''" 
				:key='innerIndex'>
					<text>{{typeItem}}</text>
					<image v-if="typeIndex1 == index && typeIndex2 == innerIndex" src="/static/type-xz.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="mask" v-if="boxIndex!=0" @click="closeBox()"></view>
		<view class="banner">
			<image src="../../static/showbg.png" mode=""></image>
			<text>在舞台上，充满活力的表演者们将运用超群的技艺,完美的呈现出每一段精彩的演出</text>
		</view>
		<view class="hd-list">
			<view class="hd-item" v-for="(item,index) in hdData" :key='index' @click="toDetail">
				<image :src="item.img" mode=""></image>
				<view class="hd-right">
					<text class="hd-title">{{item.title}}</text>
					<text class="hd-tip">{{item.tip}}</text>
					<text class="address">{{item.address}}</text>
					<text class="price">￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<FootMenu navIndex='3'/>
		<top-view></top-view>
	</view>
</template>

<script>
	import DateView from "@/components/Date.vue"
	export default{
		components:{
			DateView
		},
		data(){
			return{
				dateConf:{
					showWeek:false,
					oneWeek:false,
					oneMonth:false,
					weekend:false,
				},
				navIndex:0,
				showPx:false,
				showAll:false,
				pxIndex:0,
				boxIndex:0,
				timeIndex:0,
				typeIndex1:null,
				typeName:'全部分类',
				timeName:'全部时间',
				typeIndex2:null,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						pageId:'',
						maxHead:true,
						showHeadBg:false
					},
					left:{
						showPos:false,
						img:'' , //左侧图标
						text:'', //左侧文字
					},
					mid:{
						title:'美食' ,//页面title
						hasSearchMid:true //显示中间搜索框
					},
				},
				pxData:[
					{px:'推荐排序'},
					{px:'最近开场'},
					{px:'最新上架'},
					{px:'离我最近'},
				],
				weekData:['日','一','二','三','四','五','六'],
				timeData:["全部时间","一周内","一月内","周末"],
				typeData:[
					{
						title:'演唱会',
						tdata:['全部','流行','摇滚','民族','其它']
					},
					{
						title:'话剧歌剧',
						tdata:['全部','话剧','歌剧','音乐剧','儿童剧']
					},
					{
						title:'体育',
						tdata:['全部','球类运动','搏击运动']
					},
					{
						title:'曲苑杂坛',
						tdata:['全部','流行','摇滚','民族','其它']
					},
					{
						title:'音乐会',
						tdata:['全部','话剧','歌剧','音乐剧','儿童剧']
					},
				],
				hdData:[
					{
						title:'海盗窝综艺秀',
						img:'/static/banner.png',
						tip:'演艺演出',
						address:'沈阳市沈河区',
						price:199
					},
					{
						title:'塔湾兴顺夜市国际大马戏',
						img:'/static/banner.png',
						tip:'演艺演出',
						address:'沈阳市沈河区',
						price:199
					},
					{
						title:'东北话剧戏剧表演',
						img:'/static/banner.png',
						tip:'演艺演出',
						address:'沈阳市沈河区',
						price:199
					}
				]
			}
		},
		methods: {
			chooseNav(index) {
				console.log(index)
				if(index==this.navIndex){
					this.navIndex = 0
				}else{
					this.navIndex = index
				}
			},
			toCity(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/citySelect'
				})
			},
			showPxBox(){
				if(this.boxIndex == 3){
					this.boxIndex = 0
				}else{
					this.boxIndex = 3
				}
			},
			choosePx(index){
				this.pxIndex = index
				this.boxIndex = 0
			},
			dateCommit(){
				this.timeName = this.timeData[this.timeIndex]
				this.boxIndex = 0
			},
			chooseType(index,innerIndex){
				this.typeIndex1 = index
				this.typeIndex2 = innerIndex
				this.typeName = this.typeData[index].tdata[innerIndex]
				this.boxIndex = 0
			},
			chooseAll(){
				this.typeIndex1 = null
				this.typeIndex2 = null
				this.typeName = '全部分类'
				this.boxIndex = 0
			},
			toDetail(){
				uni.navigateTo({
					url:'yanyiDetail'
				})
			},
			closeBox(){
				this.boxIndex = 0
			},
			showAllType(){
				// this.showAll = !this.showAll
				if(this.boxIndex == 4){
					this.boxIndex = 0
				}else{
					this.boxIndex = 4
				}
			},
			showTime(){
				// this.showAll = !this.showAll
				if(this.boxIndex == 2){
					this.boxIndex = 0
				}else{
					this.boxIndex = 2
				}
			},
			allTime(){
				this.timeIndex = 0
			},
			chooseTime(index){
				this.timeIndex =index
				switch (index){
					case 0://全部
						this.$refs.dater.allDate();
						break;
					case 1://一周内
						this.$refs.dater.oneWeekDate();
						break;
					case 2://一月内
						this.$refs.dater.oneMonthDate();
						break;
					case 3://周末
						this.$refs.dater.weekendDate();
						break;
					default:
						break;
				}
			}
			
		},
	}
</script>

<style scoped>
	.showHd{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 110upx;
	}
	.mask{
		background: rgba(0,0,0,0.5);
		top:224upx;
		position: fixed;
		width: 100%;
		z-index: 8;
		height: calc(100vh - 320upx);
	}
	.nav{
		width: 700upx;
		height: 60upx;
		padding: 0 35upx 0 15upx;
		/* background: #09BB07; */
		position: absolute;
		top: 164upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.nav-item{
		width: 25%;
		flex-direction: row;
		justify-content: center;
		display: flex;
		height: 60upx;
	}
	.nav-item text{
		font-size: 28upx;
		color: #FFFFFF;
		height: 40upx;
	}
	.nav-ac{
		border-bottom: #FFFFFF solid 4upx;
	}
	.sanjiao{
		width: 0upx;
		height: 0upx;
		float: right;
		margin-right: 5%;
		border: 10upx solid transparent;
		border-top-color: #FFFFFF;
		margin-top: 14upx;
		margin-left: 10upx;
	}
	.ShowType{
		width: 750upx;
		height: auto;
		background: #FFFFFF;
		position: absolute;
		top:224upx;
		display: flex;
		flex-direction: row;
		z-index: 10;
		flex-wrap:wrap
	}
	.ShowType view{
		width: 700upx;
		height:60upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		display: block;
		font-size: 28upx;
		line-height: 60upx;
		padding-left: 25upx;
		/* text-align: center; */
	}
	.ShowType view text{
		
		float: left;
	}
	.ShowType view image{
		margin-top: 18upx;
		width: 20upx;
		min-width: 14px;
		height: 20upx;
		min-height: 14px;
		float: right;
	}
	.type-ac{
		color: #007AFF;
	}
	.ShowTime{
		padding-top: 26upx;
		padding-left: 38upx;
		width: 750upx;
		overflow: hidden;
		height: 820upx;
		background: #FFFFFF;
		position: absolute;
		top:224upx;
		z-index: 10;
		padding-bottom: 50upx;
		right: 0;
	}
	.time-list{
		width: 100%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.time-item{
		width: 160upx;
		height: 60upx;
		font-size: 28upx;
		color: rgba(51,51,51,1.00);
		margin: 0 8upx;
		text-align: center;
		position: relative;
		border-radius: 10upx;
		line-height: 60upx;
		border: rgba(220,220,220,1.00) solid 1upx;
	}
	.time-item image{
		width: 28upx;
		height: 26upx;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.date-commit{
		width: 626upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		color: #FFFFFF;
		margin-top: 60upx;
		border-radius: 20upx;
		margin-left: 62upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
	}
	.time-item-ac{
		border: rgba(87,118,254,1.00) solid 1upx;
		color: rgba(87,118,254,1.00);
	}
	.week{
		width: 90%;
		margin-left: 5%;
		height: 40upx;
		display: flex;
		margin-top: 54upx;
		flex-direction: row;
		justify-content: space-between;
	}
	.line{
		width: 750upx;
		height: 1upx;
		background: rgba(226,226,226,1.00);
		margin-top: 28upx;
	}
	.week-item{
		font-size: 28upx;
		color: rgba(0,0,0,1.00);
	}
	.ShowAll{
		padding-top: 73upx;
		padding-left: 38upx;
		width: 517upx;
		height: calc(100vh - 440upx);
		background: #FFFFFF;
		position: absolute;
		top:224upx;
		overflow: scroll;
		z-index: 10;
		padding-bottom: 50upx;
		right: 0;
	}
	.type-list{
		width: 100%;
		height: auto;
		margin-top: 50upx;
	}
	.type-title{
		font-size: 28upx;
	}
	.type-item{
		margin-top: 21upx;
		margin-right: 20upx;
		width: auto;
		display:inline-block;
		padding: 16upx 29upx;
		white-space :  nowrap;
		font-size: 28upx;
		position: relative;
		border: rgba(220,220,220,1.00) solid 1upx;
		border-radius: 10upx;
	}
	.type-item-ac{
		color: rgba(87,118,254,1.00);
		border: rgba(87,118,254,1.00) solid 1upx;
		
	}
	.type-item image{
		width: 28upx;
		height: 26upx;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.banner{
		width: 638upx;
		height: 180upx;
		left: 56upx;
		background: #FFFFFF;
		position: absolute;
		top: 270upx;
		border-radius: 20upx;
	}
	.banner image{
		width: 638upx;
		height: 180upx;
		position: absolute;
	}
	.banner text{
		width: 413upx;
		height: 57upx;
		left: 35upx;
		position: absolute;
		top: 39upx;
		font-size: 26upx;
	}
	.hd-list{
		width: 750upx;
		margin-top: 100upx;
		height: auto;
		position: relative;
		display: table;
	}
	.hd-item{
		width: 642upx;
		height: 163upx;
		margin-left: 54upx;
		margin-top: 40upx;
	}
	.hd-item image{
		width: 200upx;
		height: 163upx;
		border-radius: 10upx;
		float: left;
	}
	.hd-right{
		float: left;
		margin-left: 20upx;
		height: 153upx;
		width: 422upx;
		display: flex;
		flex-direction: column;
		padding-top: 10upx;
	}
	.hd-title{
		font-size: 28upx;
		font-weight: bold;
	}
	.hd-tip{
		font-size: 24upx;
		color: #048CFF;
	}
	.address{
		font-size: 24upx;
		color: #999999;
	}
	.price{
		font-size: 28upx;
		color: #DD540A;
	}
</style>
